<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic Example with JSX</title>
    <style>
      .commentList a{
        display: block;
        padding: 10px;
        border: 1px solid #ececec;
        cursor: pointer;
      }
    </style>
</head>
<body>

<div id="content">

</div>
<div id="stateChange"></div>

<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
<script src="browser.min.js"></script>

<script type="text/babel">
var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];
var Comment = React.createClass({
  render: function() {
    //方法需要放在{}中才能正确执行，一个返回，只能单个标签（<div></div>） (<div><p></p></div>), 这种有问题 <div></div><a></a>
    return (
      <a onClick={this.onClickYa}>
        you are --  {this.props.author}
        {
          [1,3,5,7,9].map(function(data){
            return <i>{data}</i>
          })
        }
      </a>
    );
  }, 
  onClickYa: function(e){
    console.log('c:'+ + new Date());
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data} />
      </div>
    );
  }
});

React.render(
  <CommentBox data={data} />,
  document.getElementById('content')
);

var InputState = React.createClass({
  getInitialState : function(){
    return {enable: false};
  },
  handleClick: function(e){
    this.setState({enable: !this.state.enable});
  },
  render: function(){
    return (
        <p>
          <input type="text" disabled={this.state.enable} />
          <button onClick={this.handleClick}>改变状态</button>
        </p>
      );
  }
});

React.render(<InputState />, document.getElementById('stateChange'));
</script>
</body>
</html>
